<template>
  <plain-page
    style="width: 90%;margin: 4px auto;"
  >
    <el-card
      shadow="never"
      :style="{
        'border-top': '2px solid',
        'border-top-color': StatusTag.colors[help.orderStatus]
      }"
      class="section"
      >
      <div>
        <span style="margin-right: 16px;">志愿者任务&nbsp;{{help.serviceId}}</span>
        <status-tag :status="help.orderStatus" size="large" />

        <div class="operations"></div>
      </div>
    </el-card>
    <el-card shadow="never" body-style="padding: 10px 20px;" class="section">
      <table class="info-table">
        <tr>
          <th>任务状态：</th>
          <td colspan="3">
            <status-tag :status="help.orderStatus" />
          </td>
        </tr>
        <tr>
          <th>服务对象：</th>
          <td colspan="3">{{help.linkName}}，{{help.linkPhone}}</td>
        </tr>
        <tr>
          <th>服务时间：</th>
          <td colspan="3">{{help.serviceTime}}</td>
        </tr>
        <tr>
          <th>服务地址：</th>
          <td colspan="3">{{help.address}}</td>
        </tr>
        <tr>
          <th>服务领域：</th>
          <td colspan="3">{{help.professionText}}</td>
        </tr>
        <tr>
          <th>服务内容：</th>
          <td colspan="3">{{help.description}}</td>
        </tr>
        <tr>
          <th>服务时长：</th>
          <td colspan="3">{{help.serviceDuration && (help.serviceDuration == 0 ? '1次' : help.serviceDuration + '小时')}}</td>
        </tr>
        <tr>
          <th>公益积分：</th>
          <td colspan="3">{{help.taskIntegral}}</td>
        </tr>
        <tr>
          <th>所属社区：</th>
          <td colspan="3">{{help.orgName}}</td>
        </tr>
        <tr>
          <th>任务类型：</th>
          <td colspan="3">{{help.taskTypeText}}</td>
        </tr>
        <tr>
          <th>发布时间：</th>
          <td colspan="3">{{help.createTime}}</td>
        </tr>
        <tr>
          <th>发布者：</th>
          <td colspan="3">{{help.publisherName}}，{{help.publisherPhone}}</td>
        </tr>
      </table>
    </el-card>
  </plain-page>
</template>

<script>
import StatusTag from '@/pages/volunteer/order/StatusTag';

export default {
  pageProps: {
    title: ({params, subTitle}) => subTitle(params.help.serviceId, '志愿者任务详情')
  },
  components: {
    StatusTag
  },
  data() {
    return {
      help: this.$params.help,
      StatusTag
    }
  },
  async mounted() {
    this.help = await this.$http.get('/api/volunteer/help/details', {params: {serviceId: this.$params.help.serviceId}});
  }
}
</script>

<style scoped>
.section {
  position: relative;
  margin-top: 4px;
}
.section >>> .el-card__header {
  margin-bottom: 8px;
}

.operations {
  float: right;
}
.info-table {
  width: 100%;
}
.info-table tr {
  height: 35px;
}
.info-table th {
  text-align: right;
  font-size: 14px;
  width: 70px;
  padding-right: 20px;
  font-weight: normal;
}
.info-table td {
  text-align: left;
  padding: 5px;
  font-size: 14px;
  line-height: 25px;
}
</style>